﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this demo is simulated the touch-device behavior of the jqxButton.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.fresh.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttongroup.js"></script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            font-size: 18px;
        }
        .section
        {
            background-color: #f7f7f7;
            border: 1px solid #b4b7bc;
            border-bottom-width: 0px;
            padding: 10px;
            clear: both;
            height: 30px;
            line-height: 30px;
        }
        .rc-t
        {
            -moz-border-radius-topleft: 10px;
            -webkit-border-top-left-radius: 10px;
            border-top-left-radius: 10px;
            -moz-border-radius-topright: 10px;
            -webkit-border-top-right-radius: 10px;
            border-top-right-radius: 10px;
        }
        .rc-b
        {
            -moz-border-radius-bottomleft: 10px;
            -webkit-border-bottom-left-radius: 10px;
            border-bottom-left-radius: 10px;
            -moz-border-radius-bottomright: 10px;
            -webkit-border-bottom-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .rc-all
        {
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
        .input
        {
            font-size: 18px;
            margin: 0px;
            left: 15px;
            border: none;
            height: 30px;
            line-height: 30px;
            display: block;
            position: relative;
            background: none;
        }
    </style>
    <script type="text/javascript" src="simulator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            prepareDemo("buttongroupcontainer");
            $("#buttongroup").jqxButtonGroup({ theme: 'fresh', mode: 'radio' });
            $("#buttongroup").jqxButtonGroup('setSelection', 0);
            $("#buttongroup2").jqxButtonGroup({ theme: 'fresh', mode: 'radio' });
            $("#buttongroup2").jqxButtonGroup('setSelection', 0);
            $("#button").jqxButton({ enableHover: false, theme: 'fresh', width: '50%', height: 40 });
            initDemo("buttongroupcontainer");
        });
    </script>
</head>
<body class='default'>
    <div id="demoContainer" style="margin-left: 220px; width: 460px; height: 855px; overflow: hidden;
        background-image: url(../images/iphone.png);">
        <div id="container" style="background-image: url(../images/ipadbackground.png); margin-left: 46px;
            height: 518px; width: 365px; margin-top: 185px;">
            <div id="buttongroupcontainer">
            <div style="margin-left: 8px; position: relative; top: 30px; width: 95%;">
                <h2>
                    Search Cheap Flights</h2>
                <div style="width: 100%; margin-top: 5px; margin-left: 2px; margin-bottom: 20px;" id="buttongroup">
                    <button style="padding: 10px 7px; font-size: 18px;" value="RoundTrip">
                    </button>
                    <button style="padding: 10px 7px; font-size: 18px;" value="One Way">
                    </button>
                    <button style="padding: 10px 7px; font-size: 18px;" value="Multiple Cities">
                    </button>
                </div>
                <div class="rc-t section">
                    <div style="float: left;">
                        <input placeholder="Departure city/airport" class="input" type="text" />
                    </div>
                </div>
                <div class="rc-b section">
                    <div style="float: left;">
                        <input placeholder="Destination city/airport" class="input" type="password" />
                    </div>
                </div>
                <div style="width: 100%; margin-top: 20px; margin-bottom: 20px;" id="buttongroup2">
                    <button style="padding: 10px 7px; font-size: 18px;" value="Travellers">
                    </button>
                    <button style="padding: 10px 7px; font-size: 18px;" value="Economy">
                    </button>
                </div>
                <div>
                    <input type="button" value="Search" style="font-size: 18px; margin: 15px 0px;" id="button" />
                </div>
            </div>
            </div>
        </div>
    </div>
</body>
</html>
